import {Component, OnInit, Input, OnChanges} from '@angular/core';
// @ts-ignore
import {EChartOption} from 'echarts';
import {LineChartService} from './line-chart.service';
import {HttpService} from '@kylin/http';
import {UserService} from '@kylin/user';
import {DropdownDataService} from '@dropdown';
import * as _ from 'lodash';

@Component({
    selector: 'kylin-line-chart',
    templateUrl: './line-chart.component.html',
    styleUrls: ['./line-chart.component.less'],
    providers: [LineChartService]
})

export class LineChartComponent implements OnInit, OnChanges {

    @Input() type;
    @Input() plantStartTime = '';
    @Input() plantEndTime = '';

    lineChartData: EChartOption;
    location = [];
    city = '';
    county = '';
    allowSelectCity = true;
    allowSelectCounty = true;
    cityOptions = [];
    countyOptions = [];
    needChart = true;

    varietyNoOptions: any[] = [];
    foo = ''; // 种植品种
    varietyNo = ''; // 种植品种给后端提交的数据
    constructor(private lineChartService: LineChartService,
                private http: HttpService,
                private userService: UserService,
                private dropdownDataService: DropdownDataService) {
        this.dropdownDataService.getData(
            {name: 'variety', cache: true},
        ).then(rst => {
            this.varietyNoOptions = rst;
        });


    }

    ngOnInit() {
        this.fetchChartData();
        this.accessControlInit();
    }

    ngOnChanges(changes): void {
        if (changes.plantStartTime || changes.plantEndTime) {
            this.fetchChartData();
        }
    }

    varietyNoChanges(event) {
        this.varietyNo = _.last(event);
        this.fetchChartData();
    }

    fetchChartData() {
        this.http.get('/grass/statis/plant', {
            plantStartTime: this.plantStartTime || '',
            plantEndTime: this.plantEndTime || '',
            type: this.type || '',
            city: this.city || '',
            county: this.county || '',
            varietyNo: this.varietyNo || ''
        })
            .then(res => {
                if (res.result.length > 0) {
                    this.needChart = true;
                    this.chartDataInit(res.result);
                } else {
                    this.needChart = false;
                }


            })
            .catch(err => {

            });
    }

    chartDataInit(data: any[]) {
        const legendData = this.type === 1 ? ['实际种植面积', '鲜草产量'] : ['实际种植面积', '种子产量'];
        const color = this.type === 1 ? '#B3E65A' : '#DD79FF';
        const name = this.type === 1 ? '鲜草产量' : '种子产量';

        const xAxisData = [];
        const seriesData1 = [];
        const seriesData2 = [];

        data.map(i => {
            xAxisData.push(i.plantTime + '年');
            seriesData1.push(i.actualArea);
            seriesData2.push(i.yield);
        });

        this.lineChartData = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                bottom: 'left',
                data: legendData
            },
            grid: {
                left: '10%',
                right: '10%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxisData
            },
            yAxis: {
                type: 'value'
            },
            series: [

                {
                    name: '实际种植面积',
                    type: 'line',
                    data: seriesData1,
                    itemStyle: {color: '#84B3FC'}
                },
                {
                    name: name,
                    type: 'line',
                    data: seriesData2,
                    itemStyle: {color: color}
                }
            ]
        };
    }


    private accessControlInit() {
        const roleName = this.userService.getValue('roleName');
        switch (roleName) {
            case 'sysadmin':
                this.allowSelectCity = true;
                this.allowSelectCounty = true;
                this.cityOptionsInit();
                break;
            case 'provinceAdmin':
                this.allowSelectCity = true;
                this.allowSelectCounty = true;
                this.cityOptionsInit();
                break;
            case 'cityAdmin':
                this.allowSelectCity = false;
                this.allowSelectCounty = true;
                this.city = this.userService.getValue('cId');
                this.countyOptionsInit();
                break;
            case 'areaAdmin':
                this.allowSelectCity = false;
                this.allowSelectCounty = false;
                this.city = this.userService.getValue('cId');
                this.county = this.userService.getValue('aId');
                break;
        }
    }

    private cityOptionsInit() {
        this.dropdownDataService.fetchCityOptions().then(res => {
            this.cityOptions = res;
        });
    }

    private countyOptionsInit() {
        this.dropdownDataService.fetchAreaOptions(this.city).then(res => {
            this.countyOptions = res;
        });
    }

    cityChange(event) {
        if (!event) {
            this.city = '';
        } else {
            this.city = event;
        }
        this.countyOptionsInit();
        this.fetchChartData();
    }

    countyChange(event) {
        if (!event) {
            this.county = '';
        } else {
            this.county = event;
        }
        this.fetchChartData();
    }

}
